<%-- 
    Document   : agregarExtintor
    Created on : 14/11/2010, 11:36:35 PM
    Author     : Gustavo Pastorelli
--%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>

<% request.setAttribute("allowed", "Gestionar Sistemas de Extincion"); %>
<%@ include file='../Templates/security.jsp' %>

<%@ page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript">

    var edificio = false;
    var edificio_seleccionado = false;
    var sede = false;
    var sede_seleccionado = false;

    $(function(){
        listaSedes();
    });
    
    function selecionarSedes(value){
        sede = value;
        //        $('#Edificios').empty();
        if (sede != "Sartenejas"){
            $('#Edificios').empty();
            $('#Pisos').empty();
        }
        else{
            mostrarEdificios();
        }
    }

    function selecionarEdificio(value){
        if (edificio != value){
            edificio = value;
            $('#Pisos').empty();
        }
        /*
        $.getJSON("listaEdificioAction.do",
        function(data) {
            if(sede_seleccionado!=sede){
                $('#Edificios').empty();
                $.each(data.Edificio, function(i,item){
                    if(sede == item.sede){
                        var string = "<option value='"+item.edificio+"' >"+item.edificio+"</option>";
                        $('#Edificios').append(string);
                    }
                });
                sede_seleccionado=sede;
            }
        });
         */
    }
    function mostrarEdificios(){
        $.getJSON("listaEdificioAction.do",
        function(data) {
            $.each(data.Edificio, function(i,item){
                var string = "<option value='"+item.edificio+"' >"+item.edificio+"</option>";
                $('#Edificios').prepend(string);
            });
        });
    }

    function seleccionarCategoria(cat){
        if (cat == "Extintor"){
            $('#status').empty();
            $('#status').append("<option value='Cargado'>Cargado</option>");
            $('#status').append("<option value='Descargado'>Descargado</option>");
            $('#status').append("<option value='Nuevo'>Nuevo</option>");
            $('#status').append("<option value='Dañado'>Dañado</option>");
            $('#status').append("<option value='Operativo'>Operativo</option>");
            $('#status').append("<option value='En Mantenimiento'>En Mantenimiento</option>");
        }
        else{
            $('#status').empty();
            $('#status').append("<option value='Nuevo'>Nuevo</option>");
            $('#status').append("<option value='Dañado'>Dañado</option>");
            $('#status').append("<option value='Operativo'>Operativo</option>");
            $('#status').append("<option value='En Mantenimiento'>En Mantenimiento</option>");
        }
    }
</script>

<h1 class="title">Gestión del Sistema de Extinción</h1>
<hr>
<p class="meta"></p>
<div class="entry">
    <center>
        <h2>Agregar Equipo</h2>
        <html:form action="/agregarExtintor" styleId="agregarExtintorForm" styleClass="formularioExtintor" onsubmit="return agregarExtintor();">
            <div >
                <table>
                    <tbody>
                        <tr>
                            <td colspan="5" align="center">
                                <font color="red">
                                    <bean:write name="agregarExtintorForm" property="error"/>
                                    &nbsp;
                                </font>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Número de bien:</td>
                            <td><html:text property="id_nro_bien" maxlength="10"/>
                                <html:errors property = "ext_nro_bien"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Categoría:</td>
                            <td>
                                <html:select property="categoria" styleId="categoriaExtintor" onclick="seleccionarCategoria(value)">
                                    <html:option value="Rociador">Rociador</html:option>
                                    <html:option value="Extintor">Extintor</html:option>
                                    <html:option value="Hidrante">Hidrante</html:option>
                                    <html:option value="Manguera">Manguera</html:option>
                                </html:select>
                                <html:errors property = "ext_categoria"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Sedes:</td>
                            <td>
                                <select id="Sedes" name="sede" onclick="selecionarSedes(value)"></select>
                                <html:errors property = "ext_sede"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Edificio:</td>
                            <td>
                                <select id="Edificios" name="edificio" onclick="selecionarEdificio(value)">
                                    <option value="" selected/>
                                </select>
                                <html:errors property = "ext_edificio"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Piso:</td>
                            <td>
                                <select id="Pisos" name="piso">
                                    <option value=-1 selected/>
                                </select>
                                <html:errors property = "ext_piso"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Tipo :</td>
                            <td><html:text property="tipo" maxlength="15"/>
                                <html:errors property = "ext_tipo"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Capacidad :</td>
                            <td><html:text property="capacidad" maxlength="15"/>
                                <html:errors property = "ext_capacidad"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Fecha del Último Mantenimiento :</td>
                            <td><html:text property="fecha_ultima_recarga" styleId ="fechaI" />
                                <html:errors property = "ext_fecha_ultimo"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Estado :</td>
                            <td>
                                <select id="status" name="status">
                                    <option value="Nuevo">Nuevo</option>
                                    <option value="En Mantenimiento">En Mantenimiento</option>
                                    <option value="Dañado">Dañado</option>
                                </select>
                                <html:errors property = "ext_status"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Persona de Contacto:</td>
                            <td><html:text property="persona_contacto" maxlength="30"/>
                                <html:errors property = "ext_persona_contacto"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Señalizado :</td>
                            <td>
                                <html:select property="senalizado">
                                    <html:option value="si">Si</html:option>
                                    <html:option value="no">No</html:option>
                                </html:select>
                                <html:errors property = "ext_senalizado"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Usado :</td>
                            <td>
                                <html:select property="usado">
                                    <html:option value="si">Si</html:option>
                                    <html:option value="no">No</html:option>
                                </html:select>
                                <html:errors property = "ext_usado"/>
                            </td>
                        </tr>
                        <tr>
                            <td><font color="red">*&nbsp;</font>Referencia :</td>
                            <td><html:text property="referencia"/>
                                <html:errors property = "ext_referencia"/>
                            </td>
                        </tr>
                        <tr>
                            <td><input name="coordenadas" id="coordIcon" readonly="true"  maxlength="12" type="hidden" /></td>
                        </tr>
                    </tbody>
                </table>
                <br>
                <font color="red"><p>Los campos que tiene (*) son obligatorios.</p></font>
                <br>

                <script type="text/javascript">
                    $(document).ready(function() {
                        $("#fechaI").datepicker({
                            dateFormat: 'dd/mm/yy',
                            maxDate: new Date(),
                            showOn: "button",
                            buttonImage: "style/images/calendar.gif",
                            buttonText: "calendario"
                        }).attr('readonly', true);
                    });
                </script>
            </div>
            <div class="controls">
                <html:submit styleId="agregarExtintor_btn" styleClass="oculta actionExtintor_btn" value="Agregar"/>
                <html:button property="" styleId="ubicarExtintor_btn" value="Ubicar"/>
                <html:button property="" styleId="extintores" value="Atrás"/>
            </div>
            <div id="errorUbicacion"></div>
        </html:form>
    </center>
</div>
<div id="ubicacionPlano" style="display: none;">
    <div id="mapPisoMsg">Seleccione el lugar del plano donde se encuentra el extintor. Luego presione guardar.</div>
    <div id="mapPiso"></div>
    <center>
        <input type="button"  id="guardarExtintor_btn" value="  Guardar Ubicacion  "/>
        <input type="button"  id="atrasUbicacion_btn" value="  Atras  "/>
    </center>
</div>
<div style="clear: both;">&nbsp;</div>
<script type="text/javascript">
    $('#Edificios').change(function(){
        edificio_seleccionado = $('#Edificios :selected').val();
        getPisos(edificio_seleccionado);
    });

    $('#ubicarExtintor_btn').click(function(){
        ed = $('#Edificios').val();
        ps = $('#Pisos').val();
        cat = $('#categoriaExtintor').val();
        if((ed.length == 0) || (ps.length == 0) || (cat.length == 0))
            $('#errorUbicacion').html("Ingrese primero la categoria, el edificio y piso donde se encuentra el equipo.");
        else {
            $('.formularioExtintor').css('display', 'none');
            $('#errorUbicacion').html("");
            loadPlanoExtintores(ed,ps,cat,true);
            $('#ubicacionPlano').css('display', 'block');
        }
    });
    $('#guardarExtintor_btn').click(function(){
        $('.actionExtintor_btn').css('display', 'block');
        $('#ubicacionPlano').css('display', 'none');
        $('.formularioExtintor').css('display', 'block');
    });
    $('#atrasUbicacion_btn').click(function(){
        $('.actionExtintor_btn').css('display', 'none');
        $('#ubicacionPlano').css('display', 'none');
        $('#errorUbicacion').html("");
        $('.formularioExtintor').css('display', 'block');
    });

    function getPisos(edificio){
        $.ajax({
            type: "GET",
            url: "getPisos.do?edificio="+edificio,
            dataType: 'json',
            success: processGetPisos
        });
        return false;
    }

    function processGetPisos(answer){
        $('#Pisos').empty();
        if(answer.pisos){
            $('#Pisos').empty();
            $.each(answer.pisos, function(index,value){
                if(value.id_piso == 0) piso = 'PB';
                else piso = value.id_piso;
                var string = "<option value='"+value.id_piso+"' ons>"+piso+"</option>";
                $('#Pisos').append(string);
            });
        }
    }
</script>
<script type="text/javascript" src="Modulo2/js/controlPiso.js" />